<template>
    <div class='users'>
        <p class="top_p"><el-button type="text" @click="goHome" class="sy">首页</el-button>&emsp;/&emsp;用户管理&emsp;/&emsp;用户列表</p>

      <!-- 头部搜索 -->
        <div class="seatch">
             <div class="dvinp">
                <el-input
                placeholder="请输入内容"
                 v-model="seatchval"
                clearable>
               </el-input>
                <i class="myfont  el-icon-search" @click="seatch"></i>
            </div>
            <el-button type="primary" > <span @click="userAdd">添加用户</span> </el-button>
        </div>
        <!-- 表格部分 -->
        <el-table
     :data="userdata"
     style="width: 100%"
     max-height="490">
     <el-table-column
      fixed
      type="index"
      :index="filterIndex"
      label="#"
      width="150">
     </el-table-column>
     <el-table-column
      prop="username"
      label="姓名"
      width="120">
     </el-table-column>
     <el-table-column
      prop="email"
      label="邮箱"
      width="200">
     </el-table-column>
     <el-table-column
      prop="mobile"
      label="电话"
      width="120">
      </el-table-column>
     <el-table-column
      prop="role_name"
      label="角色"
      width="300">
     </el-table-column>
     <el-table-column
      prop=""
      label="状态"
      width="120">
      <template slot-scope="scope">

       <el-switch
        v-model="scope.row.mg_state"
       active-color="#13ce66"
       inactive-color="#ccc"
       @change="log(scope)"
     >
      </el-switch>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="120">
     <template slot-scope="scope">
       <el-button type="primary" class="el-icon-edit" @click="setuser(scope)"></el-button>
        <el-button type="danger" class="el-icon-delete" @click="del(scope)"> </el-button>
          <el-tooltip class="item" effect="dark" content="分配角色" placement="top">
      <el-button type="warning" class="el-icon-setting" @click="setroles(scope)"></el-button>
    </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页部分 -->
    <el-pagination
      :current-page="pagenum"
      :page-sizes="[2,5,8,10]"
      :page-size="pagesize"
      @prev-click="jack"
      @next-click="add"
      @size-change="setsize"
      @current-change="setnum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="numall">
    </el-pagination>
    <!-- 添加的弹框 -->
    <div class="allContext" v-show="showadd">
      <div class="contexts">
        <div class="textTop">
        <p class="addtexttop">添加用户</p>
         <span @click="showfalg">X</span>
        </div>

       <el-form
            :model="formLabelAlign"
            :rules="rules"
            ref="formLabelAlign"
            label-width="100px"
            class="demo-ruleForm"
          >
            <!-- 用户名 -->
            <el-form-item
              label="用户名"
              prop="name"
            >
              <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item
              label="密码"
              prop="password"
            >
              <el-input v-model="formLabelAlign.pass"></el-input>
            </el-form-item>
            <!-- 邮箱 -->
            <el-form-item
              label="邮箱"
              prop="email"
            >
              <el-input v-model="formLabelAlign.email"></el-input>
            </el-form-item>
            <!-- 电话 -->
            <el-form-item
              label="电话"
              prop="phone"
            >
              <el-input v-model="formLabelAlign.phone"></el-input>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item class="btn">
              <el-button @click.stop="showfalg">取消</el-button>
              <el-button
                type="primary"
                @click="addcontest"
              >确定</el-button>
            </el-form-item>
          </el-form>

      </div>
    </div>
    <!-- 修改的弹框 -->
    <div class="allContext" v-show="altershow">
      <div class="contexts">
        <div class="textTop">
        <p class="addtexttop">修改用户</p>
         <span @click="showfalg">X</span>
        </div>
          <div class="cinp">
             <el-form      
            :model="alterval"
            :rules="rules1"
            ref="ruleForm1"
            label-width="100px"
            class="demo-ruleForm"
          >
            <!-- 用户名 -->
            <el-form-item
              label="用户名"
              prop="name"
            >
              <el-input v-model="alterval.username" :disabled="true"></el-input>
            </el-form-item>
            <!-- 邮箱 -->
            <el-form-item
              label="邮箱"
              prop="email"
            >
              <el-input v-model="alterval.email"></el-input>
            </el-form-item>
            <!-- 电话 -->
            <el-form-item
              label="电话"
              prop="phone"
            >
              <el-input v-model="alterval.mobile"></el-input>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item class="btn">
              <el-button @click.stop="showfalg">取消</el-button>
              <el-button
                type="primary"
                @click="alter"
              >确定</el-button>
            </el-form-item>
          </el-form>

                <div>
             </div>
            </div>
      </div>
    </div>


    <!-- 分配角色的弹框 -->
   <div class="allContext" v-show="editShow">
      <div class="contexts">
        <div class="textTop">
        <p class="addtexttop">分配角色</p>
         <span @click="showfalg">X</span>
        </div>
          <div class="cinp">
           <p> 当前用户：{{editusers.username}} </p>
           <p> 当前角色：{{editusers.role_name}} </p>
           <p> 分配新角色：
    <el-select v-model="roleval" placeholder="请选择">
    <el-option
      v-for="item in roleuser"
      :key="item.id"
      :label="item.roleName"
      :value="item.id">
    </el-option>
  </el-select>
           </p>
           <el-button>取消</el-button>
           <el-button type="primary" @click="editaup">确认</el-button>
          </div>
      </div>
    </div>
</div>
</template>

<script>
import {
  getuser,
  postusers,
  deluser,
  setstatus,
  alteruser,
  getroles,
  setroles
} from "../api/getData.js";

export default {
  data() {
    return {
      pagenum: 1, //当前页码
      pagesize: 2, //每页显示的条数
      userdata: [], //保存数据
      numall: 0, //总数据条数
      seatchval: "", //搜索框
      showadd: false, //添加框的显示
      //添加框的数据
      formLabelAlign: {
        name: "",
        email: "",
        pass: "",
        phone: ""
      },
      //修改框的数据
      alterval: {
        username: "",
        email: "",
        mobile: "",
        id: 0
      },
      altershow: false, // 修改框的显示隐藏
      editShow: false, //分配角色的显示隐藏
      editusers: {
        username: "",
        email: "",
        mobile: "",
        id: 0,
        role_name: ""
      }, //分配框的输入
      roleuser: [], //分配角色的选项
      roleval: null,
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          { min: 11, max: 11, message: "电话格式不正确", trigger: "blur" }
        ]
      },
      rules1: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { min: 3, max: 10, message: "邮箱格式不正确", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "请输入电话", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    goHome() {
      this.$router.push("/greet");
    },
    //获取数据的函数
    getlist() {
      getuser(
        `query=${this.seatchval}&pagenum=${this.pagenum}&pagesize=${
          this.pagesize
        }`
      ).then(res => {
        if (res.meta.status == 200) {
          if (res.data.users.length != 0) {
            this.userdata = res.data.users;
            this.numall = res.data.total;
            this.$message({
              message: "数据获取成功",
              type: "success"
            });
          } else {
            this.pagenum--;
            this.getlist();
          }
        } else {
          this.$message.error(res.meta.msg);
        }
      });
    },
    //使用到的index
    filterIndex(index) {
      return index + 1;
    },
    //点击切换状态触发
    log(i) {
      // console.log(i);
      //传值是用户id跟改变后的状态
      setstatus({ uid: i.row.id, type: i.row.mg_state }).then(res => {
        if (res.meta.status == 200) {
          this.$message({
            type: "success",
            message: "修改成功!"
          });
        } else {
          this.$message({
            type: "info",
            message: "好像出了点问题"
          });
        }
      });
    },
    //下一页
    add(e) {
      this.pagenum = e;
      this.getlist();
    },
    //上一页
    jack(e) {
      this.pagenum = e;
      this.getlist();
    },
    //每页显示条数发生改变时候触发的函数
    setsize(e) {
      this.pagesize = e;
      this.getlist();
    },
    //当前页码发生改变时候触发的函数
    setnum(e) {
      this.pagenum = e;
      this.getlist();
    },
    //搜索事件
    seatch() {
      this.getlist();
    },
    //打开按钮
    userAdd() {
      this.showadd = true;
    },
    //关闭按钮
    showfalg() {
      this.showadd = false;
      this.editShow = false;
      this.altershow = false;
    },
    //添加
    addcontest() {
      postusers({
        username: this.formLabelAlign.name,
        password: this.formLabelAlign.pass,
        email: this.formLabelAlign.email,
        mobile: this.formLabelAlign.phone
      }).then(res => {
        if (res.meta.status != 201) {
          this.$message({
            message: res.meta.msg,
            type: "warning"
          });
        } else {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          for (let i in this.formLabelAlign) {
            this.formLabelAlign[i] = "";
          }
          this.showadd = false;
          this.getlist();
        }
      });
    },
    //删除
    del(e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deluser(e.row.id).then(res => {
            if (res.meta.status == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            } else {
              this.$message({
                type: "info",
                message: "服务器被外星人抢走了"
              });
            }
            this.getlist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //编辑
    setuser(e) {
      this.alterval = e.row;
      console.log(this.alterval);
      this.altershow = true;
      this.$message({
        message: "查询用户信息成功",
        type: "success"
      });
    },
    //编辑的提交
    alter() {
      alteruser({
        id: this.alterval.id,
        con: { email: this.alterval.email, mobile: this.alterval.mobile }
      }).then(res => {
        if (res.meta.status != 200) {
          this.$message({
            message: res.meta.msg,
            type: "warning"
          });
        } else {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          for (let i in this.alterval) {
            this.alterval[i] = "";
          }
          this.altershow = false;
          this.getlist();
        }
      });
    },
    //点击分配角色的事件
    setroles(e) {
      this.editusers = e.row;
      this.editShow = true;
      this.$message({
        type: "success",
        message: "用户分配角色成功!"
      });
      getroles().then(res => {
        console.log(res);
        this.roleuser = res.data;
      });
    },
    //确认修改角色
    editaup() {
      // console.log(this.roleval,this.editusers.id);
      if (this.roleval != "") {
        setroles({ id: this.editusers.id, rid: this.roleval }).then(res => {
          console.log(res);
          if (res.meta.status == 200) {
            this.$message({
              message: res.meta.msg,
              type: "success"
            });
          } else {
            this.$message.error(res.meta.msg);
          }
          for (let i in this.roleuser) {
            this.roleuser[i] = "";
          }
          this.roleval = null;
          this.editShow = false;
          this.getlist();
        });
      }
    }
  },
  components: {}
};
</script>

<style lang='scss'>
.users {
  background: #fff;
}
.seatch {
  display: flex;
  align-items: center;
}
.dvinp {
  margin: 10px;
  border-radius: 3px;
  display: flex;
}
.dvinp .myfont {
  display: inline-block;
  width: 50px;
  height: 40px;
  outline: none;
  line-height: 40px;
  border: #ccc;
  border-left: 1px solid #ccc;
  background: #eee;
  text-align: center;
}
.seatch .el-button {
  height: 40px;
}
.cell .el-button {
  padding: 5px !important;
}

.cinp {
  width: 100%;
}
.cinp p {
  width: 100%;
  height: 40px;
  display: flex;
  margin: 10px 0;
  line-height: 40px;
}
.cinp p span {
  width: 15%;
  text-align: right;
}
.cinp p input {
  width: 100%;
  margin: 0 10px;
  border-radius: 3px;
  padding-left: 10px;
  border: 1px solid #aaa;
}
</style>
